﻿{template 'common/header'}
<link rel="stylesheet" href="//lbs.qq.com/tool/getpoint/common.css">
<link rel="stylesheet" href="//cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.css">
<script src="{$_W['siteroot']}web/resource/js/lib/jquery-ui-1.10.3.min.js"></script>
<script src="//map.qq.com/api/js?v=2.exp" charset="utf-8"></script>
<script src="//3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
<style type="text/css">
html,body{height:100%;}
#main{margin:0 auto;width:100%;height:82%;border-top:0;}
#tooles{position:relative;z-index:100;height:25px;background:#5688cb;color:#fff;}
#bside_left{float:left;overflow:auto;padding:10px 0 10px 10px;width:24.95%;height:410px; display:none}
#bside_rgiht{float:left;width:100%;height: 100%;font-size:9pt;}
#no_value{position:absolute;top:3px;left:10px;height:20px;}
#cur_city{ padding:5px;}
#cur_city .change_city{margin-left:5px;cursor:pointer;}
#level{margin-left:20px;}
.logo_img{width:172px;height:23px;}
.poi{position:relative;height:41; display:none!important;}
.poi_note{width:63px;}
#poi_cur,.poi_note{line-height:26px;}
#poi_cur{margin-right:10px;width:10pc;}
.btn_copy{float:left;width:49px;height:24px;background:url({aide_URL}web/resource/images/map/btn_cpoy.png) 0 0;}
.already{float:left;display:none;padding-left:5px;width:52px;color:red;line-height:26px;}
.info_list{margin-bottom:5px;cursor:pointer;cleat:both;}
#city{position:fixed;top:25px;left:0; right:20px;z-index:999;overflow:auto;padding:10px;height:80%;background:#fff;color:#000;box-shadow: rgb(153, 153, 153) 0px 0px 4px;}
#city .city_class{background:#fff;font-size:9pt;}
#city .city_container{margin-top:10px;margin-bottom:10px;background:#fff;}
#city .city_container_left{float:left;width:3pc;}
#city .city_container_right{float:left;width:289px;}
#city .close{float:right;width:20px;height:20px;font-weight:400;font-size:20px;}
#city .city_name,#city .close{display:inline-block;cursor:pointer;}
#city .city_name{margin-left:5px;color:#2f82c4;font-size:9pt;line-height:20px;}
#curCity{margin-right:5px;}
.city_hide{display:none;}
#container{width:100%;height:100%;}
#no_value{position:relative;width:200px;color:red;}
.smnoprint div div{ border:none!important;}
.smnoprint div div div{background-color:rgba(255, 255, 255, 0.580392)!important;}
.smnoprint div div div:nth-child(3){border-bottom: 1px solid #ccc!important;}
#container div div div div:nth-child(2) div{border:none!important;border-radius: 6px; color: #06F; padding:0 5px!important;background-color:rgba(255, 255, 255, 0.880392)!important;}
.mui-input-row .mui-input-search~.mui-icon-search{font-size: 20px;position: absolute;z-index: 1;top: 8px;right: 0;width: 38px;height: 38px;text-align: center;color: #999;}
.mui-input-search { margin-bottom:0!important;border-radius: 6px!important;height: 35px!important;border: 0.5px solid rgba(0,0,0,.2)!important;line-height: 16px!important;}
.mui-input-clear { margin-bottom:0!important; padding-right:30px!important;}
.mui-search.mui-active:before{ top:80%;}
</style>
<div style="position:relative;margin:0px auto; height:100%;">
    <div id="main">
        <div id="tooles">
            <div id="cur_city">
                <strong>北京市</strong><span class="change_city">[<span>更换城市</span>]<span id="level">当前缩放等级：10</span></span>
                <div id="city" class="city_hide">
                    <h3 class="city_class">热门城市<span class="close">X</span></h3>
                    <div class="city_container">
                        <span class="city_name">北京</span>
                        <span class="city_name">深圳</span>
                        <span class="city_name">上海</span>
                        <span class="city_name">香港</span>
                        <span class="city_name">澳门</span>
                        <span class="city_name">广州</span>
                        <span class="city_name">天津</span>
                        <span class="city_name">重庆</span>
                        <span class="city_name">杭州</span>
                        <span class="city_name">成都</span>
                        <span class="city_name">武汉</span>
                        <span class="city_name">青岛</span>
                    </div>
                    <h3 class="city_class">全国城市</h3>
                    <div class="city_container">
                        <div class="city_container_left">直辖市</div>
                        <div class="city_container_right">
                            <span class="city_name">北京</span>
                            <span class="city_name">上海</span>
                            <span class="city_name">天津</span>
                            <span class="city_name">重庆</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">内蒙古</span></div>
                        <div class="city_container_right">
                            <span class="city_name">呼和浩特</span>
                            <span class="city_name">包头</span>
                            <span class="city_name">乌海</span>
                            <span class="city_name">赤峰</span>
                            <span class="city_name">通辽</span>
                            <span class="city_name">鄂尔多斯</span>
                            <span class="city_name">呼伦贝尔</span>
                            <span class="city_name">巴彦淖尔</span>
                            <span class="city_name">乌兰察布</span>
                            <span class="city_name">兴安盟</span>
                            <span class="city_name">锡林郭勒盟</span>
                            <span class="city_name">阿拉善盟</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">山西</span></div>
                        <div class="city_container_right">
                            <span class="city_name">太原</span>
                            <span class="city_name">大同</span>
                            <span class="city_name">阳泉</span>
                            <span class="city_name">长治</span>
                            <span class="city_name">晋城</span>
                            <span class="city_name">朔州</span>
                            <span class="city_name">晋中</span>
                            <span class="city_name">运城</span>
                            <span class="city_name">忻州</span>
                            <span class="city_name">临汾</span>
                            <span class="city_name">吕梁</span>

                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">陕西</span></div>
                        <div class="city_container_right">
                            <span class="city_name">西安</span>
                            <span class="city_name">铜川</span>
                            <span class="city_name">宝鸡</span>
                            <span class="city_name">咸阳</span>
                            <span class="city_name">渭南</span>
                            <span class="city_name">延安</span>
                            <span class="city_name">汉中</span>
                            <span class="city_name">榆林</span>
                            <span class="city_name">安康</span>
                            <span class="city_name">商洛</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">河北</span></div>
                        <div class="city_container_right">
                            <span class="city_name">石家庄</span>
                            <span class="city_name">唐山</span>
                            <span class="city_name">秦皇岛</span>
                            <span class="city_name">邯郸</span>
                            <span class="city_name">邢台</span>
                            <span class="city_name">保定</span>
                            <span class="city_name">张家口</span>
                            <span class="city_name">承德</span>
                            <span class="city_name">沧州</span>
                            <span class="city_name">廊坊</span>
                            <span class="city_name">衡水</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">辽宁</span></div>
                        <div class="city_container_right">
                            <span class="city_name">沈阳</span>
                            <span class="city_name">大连</span>
                            <span class="city_name">鞍山</span>
                            <span class="city_name">抚顺</span>
                            <span class="city_name">本溪</span>
                            <span class="city_name">丹东</span>
                            <span class="city_name">锦州</span>
                            <span class="city_name">营口</span>
                            <span class="city_name">阜新</span>
                            <span class="city_name">辽阳</span>
                            <span class="city_name">盘锦</span>
                            <span class="city_name">铁岭</span>
                            <span class="city_name">朝阳</span>
                            <span class="city_name">葫芦岛</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">吉林</span></div>
                        <div class="city_container_right">
                            <span class="city_name">长春</span>
                            <span class="city_name">吉林</span>
                            <span class="city_name">四平</span>
                            <span class="city_name">辽源</span>
                            <span class="city_name">通化</span>
                            <span class="city_name">白山</span>
                            <span class="city_name">松原</span>
                            <span class="city_name">白城</span>
                            <span class="city_name">延边</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">黑龙江</span></div>
                        <div class="city_container_right">
                            <span class="city_name">哈尔滨</span>
                            <span class="city_name">齐齐哈尔</span>
                            <span class="city_name">鸡西</span>
                            <span class="city_name">鹤岗</span>
                            <span class="city_name">双鸭山</span>
                            <span class="city_name">大庆</span>
                            <span class="city_name">伊春</span>
                            <span class="city_name">牡丹江</span>
                            <span class="city_name">佳木斯</span>
                            <span class="city_name">七台河</span>
                            <span class="city_name">黑河</span>
                            <span class="city_name">绥化</span>
                            <span class="city_name">大兴安岭</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">江苏</span></div>
                        <div class="city_container_right">
                            <span class="city_name">南京</span>
                            <span class="city_name">无锡</span>
                            <span class="city_name">徐州</span>
                            <span class="city_name">常州</span>
                            <span class="city_name">苏州</span>
                            <span class="city_name">南通</span>
                            <span class="city_name">连云港</span>
                            <span class="city_name">淮安</span>
                            <span class="city_name">盐城</span>
                            <span class="city_name">扬州</span>
                            <span class="city_name">镇江</span>
                            <span class="city_name">泰州</span>
                            <span class="city_name">宿迁</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">安徽</span></div>
                        <div class="city_container_right">
                            <span class="city_name">合肥</span>
                            <span class="city_name">蚌埠</span>
                            <span class="city_name">芜湖</span>
                            <span class="city_name">淮南</span>
                            <span class="city_name">马鞍山</span>
                            <span class="city_name">淮北</span>
                            <span class="city_name">铜陵</span>
                            <span class="city_name">安庆</span>
                            <span class="city_name">黄山</span>
                            <span class="city_name">阜阳</span>
                            <span class="city_name">宿州</span>
                            <span class="city_name">滁州</span>
                            <span class="city_name">六安</span>
                            <span class="city_name">宣城</span>
                            <span class="city_name">池州</span>
                            <span class="city_name">亳州</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">山东</span></div>
                        <div class="city_container_right">
                            <span class="city_name">济南</span>
                            <span class="city_name">青岛</span>
                            <span class="city_name">淄博</span>
                            <span class="city_name">枣庄</span>
                            <span class="city_name">东营</span>
                            <span class="city_name">潍坊</span>
                            <span class="city_name">烟台</span>
                            <span class="city_name">威海</span>
                            <span class="city_name">济宁</span>
                            <span class="city_name">泰安</span>
                            <span class="city_name">日照</span>
                            <span class="city_name">莱芜</span>
                            <span class="city_name">临沂</span>
                            <span class="city_name">德州</span>
                            <span class="city_name">聊城</span>
                            <span class="city_name">滨州</span>
                            <span class="city_name">菏泽</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">浙江</span></div>
                        <div class="city_container_right">
                            <span class="city_name">杭州</span>
                            <span class="city_name">宁波</span>
                            <span class="city_name">温州</span>
                            <span class="city_name">嘉兴</span>
                            <span class="city_name">绍兴</span>
                            <span class="city_name">金华</span>
                            <span class="city_name">衢州</span>
                            <span class="city_name">舟山</span>
                            <span class="city_name">台州</span>
                            <span class="city_name">丽水</span>
                            <span class="city_name">湖州</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">江西</span></div>
                        <div class="city_container_right">
                            <span class="city_name">南昌</span>
                            <span class="city_name">景德镇</span>
                            <span class="city_name">萍乡</span>
                            <span class="city_name">九江</span>
                            <span class="city_name">新余</span>
                            <span class="city_name">鹰潭</span>
                            <span class="city_name">赣州</span>
                            <span class="city_name">吉安</span>
                            <span class="city_name">宜春</span>
                            <span class="city_name">抚州</span>
                            <span class="city_name">上饶</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">福建</span></div>
                        <div class="city_container_right">
                            <span class="city_name">福州</span>
                            <span class="city_name">厦门</span>
                            <span class="city_name">莆田</span>
                            <span class="city_name">三明</span>
                            <span class="city_name">泉州</span>
                            <span class="city_name">漳州</span>
                            <span class="city_name">南平</span>
                            <span class="city_name">龙岩</span>
                            <span class="city_name">宁德</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">湖南</span></div>
                        <div class="city_container_right">
                            <span class="city_name">长沙</span>
                            <span class="city_name">株洲</span>
                            <span class="city_name">湘潭</span>
                            <span class="city_name">衡阳</span>
                            <span class="city_name">邵阳</span>
                            <span class="city_name">岳阳</span>
                            <span class="city_name">常德</span>
                            <span class="city_name">张家界</span>
                            <span class="city_name">益阳</span>
                            <span class="city_name">郴州</span>
                            <span class="city_name">永州</span>
                            <span class="city_name">怀化</span>
                            <span class="city_name">娄底</span>
                            <span class="city_name">湘西</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">湖北</span></div>
                        <div class="city_container_right">
                            <span class="city_name">武汉</span>
                            <span class="city_name">黄石</span>
                            <span class="city_name">襄樊</span>
                            <span class="city_name">十堰</span>
                            <span class="city_name">宜昌</span>
                            <span class="city_name">荆门</span>
                            <span class="city_name">鄂州</span>
                            <span class="city_name">孝感</span>
                            <span class="city_name">荆州</span>
                            <span class="city_name">黄冈</span>
                            <span class="city_name">咸宁</span>
                            <span class="city_name">随州</span>
                            <span class="city_name">恩施</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">河南</span></div>
                        <div class="city_container_right">
                            <span class="city_name">郑州</span>
                            <span class="city_name">开封</span>
                            <span class="city_name">洛阳</span>
                            <span class="city_name">平顶山</span>
                            <span class="city_name">焦作</span>
                            <span class="city_name">鹤壁</span>
                            <span class="city_name">新乡</span>
                            <span class="city_name">安阳</span>
                            <span class="city_name">濮阳</span>
                            <span class="city_name">许昌</span>
                            <span class="city_name">漯河</span>
                            <span class="city_name">三门峡</span>
                            <span class="city_name">南阳</span>
                            <span class="city_name">商丘</span>
                            <span class="city_name">信阳</span>
                            <span class="city_name">周口</span>
                            <span class="city_name">驻马店</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">海南</span></div>
                        <div class="city_container_right">
                            <span class="city_name">海口</span>
                            <span class="city_name">三亚</span>
                            <span class="city_name">三沙</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">广东</span></div>
                        <div class="city_container_right">
                            <span class="city_name">广州</span>
                            <span class="city_name">深圳</span>
                            <span class="city_name">珠海</span>
                            <span class="city_name">汕头</span>
                            <span class="city_name">韶关</span>
                            <span class="city_name">佛山</span>
                            <span class="city_name">江门</span>
                            <span class="city_name">湛江</span>
                            <span class="city_name">茂名</span>
                            <span class="city_name">东沙群岛</span>
                            <span class="city_name">肇庆</span>
                            <span class="city_name">惠州</span>
                            <span class="city_name">梅州</span>
                            <span class="city_name">汕尾</span>
                            <span class="city_name">河源</span>
                            <span class="city_name">阳江</span>
                            <span class="city_name">清远</span>
                            <span class="city_name">东莞</span>
                            <span class="city_name">中山</span>
                            <span class="city_name">潮州</span>
                            <span class="city_name">揭阳</span>
                            <span class="city_name">云浮</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">广西</span></div>
                        <div class="city_container_right">
                            <span class="city_name">南宁</span>
                            <span class="city_name">柳州</span>
                            <span class="city_name">桂林</span>
                            <span class="city_name">梧州</span>
                            <span class="city_name">北海</span>
                            <span class="city_name">防城港</span>
                            <span class="city_name">钦州</span>
                            <span class="city_name">贵港</span>
                            <span class="city_name">玉林</span>
                            <span class="city_name">百色</span>
                            <span class="city_name">贺州</span>
                            <span class="city_name">河池</span>
                            <span class="city_name">来宾</span>
                            <span class="city_name">崇左</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">贵州</span></div>
                        <div class="city_container_right">
                            <span class="city_name">贵阳</span>
                            <span class="city_name">遵义</span>
                            <span class="city_name">安顺</span>
                            <span class="city_name">铜仁</span>
                            <span class="city_name">毕节</span>
                            <span class="city_name">六盘水</span>
                            <span class="city_name">黔西南</span>
                            <span class="city_name">黔东南</span>
                            <span class="city_name">黔南</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">四川</span></div>
                        <div class="city_container_right">
                            <span class="city_name">成都</span>
                            <span class="city_name">自贡</span>
                            <span class="city_name">攀枝花</span>
                            <span class="city_name">泸州</span>
                            <span class="city_name">德阳</span>
                            <span class="city_name">绵阳</span>
                            <span class="city_name">广元</span>
                            <span class="city_name">遂宁</span>
                            <span class="city_name">内江</span>
                            <span class="city_name">乐山</span>
                            <span class="city_name">南充</span>
                            <span class="city_name">宜宾</span>
                            <span class="city_name">广安</span>
                            <span class="city_name">达州</span>
                            <span class="city_name">眉山</span>
                            <span class="city_name">雅安</span>
                            <span class="city_name">巴中</span>
                            <span class="city_name">资阳</span>
                            <span class="city_name">阿坝</span>
                            <span class="city_name">甘孜</span>
                            <span class="city_name">凉山</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">云南</span></div>
                        <div class="city_container_right">
                            <span class="city_name">昆明</span>
                            <span class="city_name">保山</span>
                            <span class="city_name">昭通</span>
                            <span class="city_name">丽江</span>
                            <span class="city_name">普洱</span>
                            <span class="city_name">临沧</span>
                            <span class="city_name">曲靖</span>
                            <span class="city_name">玉溪</span>
                            <span class="city_name">文山</span>
                            <span class="city_name">西双版纳</span>
                            <span class="city_name">楚雄</span>
                            <span class="city_name">红河</span>
                            <span class="city_name">德宏</span>
                            <span class="city_name">大理</span>
                            <span class="city_name">怒江</span>
                            <span class="city_name">迪庆</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">甘肃</span></div>
                        <div class="city_container_right">
                            <span class="city_name">兰州</span>
                            <span class="city_name">嘉峪关</span>
                            <span class="city_name">金昌</span>
                            <span class="city_name">白银</span>
                            <span class="city_name">天水</span>
                            <span class="city_name">酒泉</span>
                            <span class="city_name">张掖</span>
                            <span class="city_name">武威</span>
                            <span class="city_name">定西</span>
                            <span class="city_name">陇南</span>
                            <span class="city_name">平凉</span>
                            <span class="city_name">庆阳</span>
                            <span class="city_name">临夏</span>
                            <span class="city_name">甘南</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">宁夏</span></div>
                        <div class="city_container_right">
                            <span class="city_name">银川</span>
                            <span class="city_name">石嘴山</span>
                            <span class="city_name">吴忠</span>
                            <span class="city_name">固原</span>
                            <span class="city_name">中卫</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">青海</span></div>
                        <div class="city_container_right">
                            <span class="city_name">西宁</span>
                            <span class="city_name">玉树</span>
                            <span class="city_name">果洛</span>
                            <span class="city_name">海东</span>
                            <span class="city_name">海西</span>
                            <span class="city_name">黄南</span>
                            <span class="city_name">海北</span>
                            <span class="city_name">海南</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">西藏</span></div>
                        <div class="city_container_right">
                            <span class="city_name">拉萨</span>
                            <span class="city_name">那曲</span>
                            <span class="city_name">昌都</span>
                            <span class="city_name">山南</span>
                            <span class="city_name">日喀则</span>
                            <span class="city_name">阿里</span>
                            <span class="city_name">林芝</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                    <div class="city_container">
                        <div class="city_container_left"><span class="style_color">新疆</span></div>
                        <div class="city_container_right">
                            <span class="city_name">乌鲁木齐</span>
                            <span class="city_name">克拉玛依</span>
                            <span class="city_name">吐鲁番</span>
                            <span class="city_name">哈密</span>
                            <span class="city_name">博尔塔拉</span>
                            <span class="city_name">巴音郭楞</span>
                            <span class="city_name">克孜勒苏</span>
                            <span class="city_name">和田</span>
                            <span class="city_name">阿克苏</span>
                            <span class="city_name">喀什</span>
                            <span class="city_name">塔城</span>
                            <span class="city_name">伊犁</span>
                            <span class="city_name">昌吉</span>
                            <span class="city_name">阿勒泰</span>
                        </div>
                    </div>
                    <div style="clear:both"></div>
                </div>
            </div>
        </div>

        <div id="bside_left">
            <div id="txt_pannel">
                <h3>功能简介：</h3>
                <p>1、支持地址 精确/模糊 查询；</p>
                <p>2、支持POI点坐标显示；</p>
                <p>3、坐标鼠标跟随显示；</p>
                <h3>使用说明：</h3>
                <p>在搜索框搜索关键词后，地图上会显示相应poi点，同时左侧显示对应该点的信息，点击某点或某信息，会得到相应坐标，搜索栏会显示相应该点的地址，然后确定即可。</p>
            </div>
        </div>

        <div id="bside_rgiht">
            <div id="container"></div>
        </div>
    </div>
    <div style="margin-bottom:0;left:0;position:absolute;right: 0;bottom: 0; background:#FFF">
        <div class="mui-content-padded" style="margin-top:3px;">
            <form action="" method="post">
            <p class="mui-small mui-text-center mui-text-success">温馨提醒：点击地图任何一个点可获取精确位置</p>
            <div class="mui-input-row mui-search">
                <input type="search" id="addr_cur" class="mui-input-clear" onKeyPress="if(event.keyCode==13) {btnSearch.click();return false;}"  placeholder="输入当前城市关键词"/>
            </div>
            <span id="btn_search"></span>
            <div class="poi">
                <div class="poi_note">当前坐标：</div>
                <input type="text" id="poi_cur" />
                <input type="hidden" id="ad_info" />
                <input type="hidden" id="poi_json" />
                <div class="poi_note">当前地址：</div>
            </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
$(function () {
	$('.mui-search .mui-placeholder').on("tap",function(e){
		$('#addr_cur').focus();
		var target = document.getElementById("addr_cur");
  		setTimeout(function(){
			target.scrollIntoViewIfNeeded();
			//console.log('scrollIntoViewIfNeeded');
		},400);
	});
	$('#addr_cur').on('blur',function(e){
		if ($('#addr_cur').val()!=''){
			$('.mui-icon-clear').removeClass('mui-hidden');
		}
	});

});
var container = document.getElementById("container");
var map = new qq.maps.Map(container, {zoom: 10}),
	label = new qq.maps.Label({
		map: map,
		offset: new qq.maps.Size(15, -12),
		draggable: false,
		clickable: false
	}),
	markerArray = [],
	curCity = document.getElementById("cur_city"),
	btnSearch = document.getElementById("btn_search"),
	bside = document.getElementById("bside_left"),
	url,
	query_city,
	cityservice = new qq.maps.CityService({
		complete: function(result) {
			console.log(result.detail.latLng);
			curCity.children[0].innerHTML = result.detail.name;
			map.setCenter(result.detail.latLng);
		}
	});
//定位开始
var geolocation = new qq.maps.Geolocation("OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77", "myapp");//移动端定位
var options = {timeout: 9000};
function showPosition(position) {
	//province,city;
	curCity.children[0].innerHTML = position.city;
    map.setCenter(new qq.maps.LatLng(position.lat, position.lng));
};
function showErr() {
	//curCity.children[0].innerHTML= "定位失败！";
	cityservice.searchLocalCity();//wifi定位
};
geolocation.getLocation(showPosition, showErr, options);
//定位结束
map.setOptions({draggableCursor: "crosshair"});
$(container).mouseenter(function() {label.setMap(map)});
$(container).mouseleave(function() {label.setMap(null)});
qq.maps.event.addListener(map, "mousemove", function(e) {
	var latlng = e.latLng;
	label.setPosition(latlng);
	label.setContent(latlng.getLat().toFixed(6) + "," + latlng.getLng().toFixed(6))
});

function getLocation(lat,lng,address){
	var url3 = encodeURI("//apis.map.qq.com/ws/geocoder/v1/?location=" + lat + "," + lng + "&key=2SJBZ-MOXRX-ZNZ4C-ZHNJ2-EHRZT-RWFQ7&output=jsonp&&callback=?");
    $.getJSON(url3, function (result) {
        if(result.result!=undefined){
            document.getElementById("addr_cur").value = address==''?result.result.address:address;
			document.getElementById("ad_info").value = result.result.ad_info.name;
			$('.mui-search').addClass('mui-active');
        }else{
            document.getElementById("addr_cur").value = "";
        }

    })
}
qq.maps.event.addListener(map, "click", function(e) {
	document.getElementById("poi_cur").value = e.latLng.getLat().toFixed(6) + "," + e.latLng.getLng().toFixed(6);
	document.getElementById("poi_json").value = '{"lng":' + e.latLng.getLng().toFixed(6) + ',"lat":' + e.latLng.getLat().toFixed(6) + '}';
	getLocation(e.latLng.getLat(),e.latLng.getLng(),'');
});
qq.maps.event.addListener(map, "zoom_changed", function() {
	document.getElementById("level").innerHTML = "当前缩放等级：" + map.getZoom()
});
var listener_arr = [];
var isNoValue = false;
qq.maps.event.addDomListener(btnSearch, 'click', function() {
	util.loading();
	$('#addr_cur').blur();//搜索后弹起
	var value = this.parentNode.getElementsByTagName("input")[0].value;
	var latlngBounds = new qq.maps.LatLngBounds();
	for (var i = 0, l = listener_arr.length; i < l; i++) {
		qq.maps.event.removeListener(listener_arr[i])
	}
	listener_arr.length = 0;
	query_city = curCity.children[0].innerHTML;
	url = encodeURI("//apis.map.qq.com/ws/place/v1/search?keyword=" + value + "&boundary=region(" + query_city + ",0)&page_size=9&page_index=1&key=2SJBZ-MOXRX-ZNZ4C-ZHNJ2-EHRZT-RWFQ7&output=jsonp&&callback=?");
	$.getJSON(url, function(result) {
		util.loading().close();
		if (result.count) {
			isNoValue = false;
			bside.innerHTML = "";
			each(markerArray, function(n, ele) {
				ele.setMap(null)
			});
			markerArray.length = 0;
			each(result.data, function(n, ele) {
				var latlng = new qq.maps.LatLng(ele.location.lat, ele.location.lng);
				latlngBounds.extend(latlng);
				var left = n * 27;
				var marker = new qq.maps.Marker({
					map: map,
					position: latlng,
					zIndex: 10
				});
				marker.index = n;
				marker.isClicked = false;
				setAnchor(marker, true);
				markerArray.push(marker);
				var listener1 = qq.maps.event.addDomListener(marker, "mouseover", function() {
					var n = this.index;
					setCurrent(markerArray, n, false);
					setCurrent(markerArray, n, true);
					label.setContent(this.position.getLat().toFixed(6) + "," + this.position.getLng().toFixed(6));
					label.setPosition(this.position);
					label.setOptions({
						offset: new qq.maps.Size(15, -20)
					})
				});
				listener_arr.push(listener1);
				var listener2 = qq.maps.event.addDomListener(marker, "mouseout", function() {
					var n = this.index;
					setCurrent(markerArray, n, false);
					setCurrent(markerArray, n, true);
					label.setOptions({
						offset: new qq.maps.Size(15, -12)
					})
				});
				listener_arr.push(listener2);
				var listener3 = qq.maps.event.addDomListener(marker, "click", function() {
					var n = this.index;
					setFlagClicked(markerArray, n);
					setCurrent(markerArray, n, false);
					setCurrent(markerArray, n, true);
					getLocation(ele.location.lat.toFixed(6), ele.location.lng.toFixed(6), bside.childNodes[n].childNodes[1].childNodes[1].innerHTML.substring(3));
				});
				listener_arr.push(listener3);
				map.fitBounds(latlngBounds);
				var div = document.createElement("div");
				div.className = "info_list";
				var order = document.createElement("div");
				var leftn = -54 - 17 * n;
				order.style.cssText = "width:17px;height:17px;margin:3px 3px 0px 0px;float:left;background:url(//lbs.qq.com/tool/getpoint/img/marker_n.png) " + leftn + "px 0px";
				div.appendChild(order);
				var pannel = document.createElement("div");
				pannel.style.cssText = "width:200px;float:left;";
				div.appendChild(pannel);
				var name = document.createElement("p");
				name.style.cssText = "margin:0px;color:#0000CC";
				name.innerHTML = ele.title;
				pannel.appendChild(name);
				var address = document.createElement("p");
				address.style.cssText = "margin:0px;";
				address.innerHTML = "地址：" + ele.address;
				pannel.appendChild(address);
				if (ele.tel != undefined) {
					var phone = document.createElement("p");
					phone.style.cssText = "margin:0px;";
					phone.innerHTML = "电话：" + ele.tel;
					pannel.appendChild(phone)
				}
				var position = document.createElement("p");
				position.style.cssText = "margin:0px;";
				position.innerHTML = "坐标：" + ele.location.lat.toFixed(6) + "，" + ele.location.lng.toFixed(6);
				pannel.appendChild(position);
				bside.appendChild(div);
				div.style.height = pannel.offsetHeight + "px";
				div.isClicked = false;
				div.index = n;
				marker.div = div;
				div.marker = marker
			});
			$("#bside_left").delegate(".info_list", "mouseover", function(e) {
				var n = this.index;
				setCurrent(markerArray, n, false);
				setCurrent(markerArray, n, true)
			});
			$("#bside_left").delegate(".info_list", "mouseout", function() {
				each(markerArray, function(n, ele) {
					if (!ele.isClicked) {
						setAnchor(ele, true);
						ele.div.style.background = "#fff"
					}
				})
			});
			$("#bside_left").delegate(".info_list", "click", function(e) {
				var n = this.index;
				setFlagClicked(markerArray, n);
				setCurrent(markerArray, n, false);
				setCurrent(markerArray, n, true);
				map.setCenter(markerArray[n].position);
				getLocation(markerArray[n].position.lat, markerArray[n].position.lng, this.childNodes[1].childNodes[1].innerHTML.substring(3));
			})
		} else {
			bside.innerHTML = "";
			each(markerArray, function(n, ele) {
				ele.setMap(null)
			});
			markerArray.length = 0;
			var novalue = document.createElement('div');
			novalue.id = "no_value";
			//novalue.innerHTML = "对不起，没有搜索到你要找的结果!";
			util.alert('对不起，没有搜索到你要找的结果', ' ', false);
			bside.appendChild(novalue);
			isNoValue = true
		}
	})
});

function setAnchor(marker, flag) {
	var left = marker.index * 27;
	if (flag == true) {
		var anchor = new qq.maps.Point(10, 30),
			origin = new qq.maps.Point(left, 0),
			size = new qq.maps.Size(27, 33),
			icon = new qq.maps.MarkerImage("{aide_URL}web/resource/images/map/marker10.png", size, origin, anchor);
		marker.setIcon(icon)
	} else {
		var anchor = new qq.maps.Point(10, 30),
			origin = new qq.maps.Point(left, 35),
			size = new qq.maps.Size(27, 33),
			icon = new qq.maps.MarkerImage("{aide_URL}web/resource/images/map/marker10.png", size, origin, anchor);
		marker.setIcon(icon)
	}
}
function setCurrent(arr, index, isMarker) {
	if (isMarker) {
		each(markerArray, function(n, ele) {
			if (n == index) {
				setAnchor(ele, false);
				ele.setZIndex(10)
			} else {
				if (!ele.isClicked) {
					setAnchor(ele, true);
					ele.setZIndex(9)
				}
			}
		})
	} else {
		each(markerArray, function(n, ele) {
			if (n == index) {
				ele.div.style.background = "#DBE4F2"
			} else {
				if (!ele.div.isClicked) {
					ele.div.style.background = "#fff"
				}
			}
		})
	}
}
function setFlagClicked(arr, index) {
	each(markerArray, function(n, ele) {
		if (n == index) {
			ele.isClicked = true;
			ele.div.isClicked = true;
			var str = '<div style="width:250px;">' + ele.div.children[1].innerHTML.toString() + '</div>';
			var latLng = ele.getPosition();
			document.getElementById("poi_cur").value = latLng.getLat().toFixed(6) + "," + latLng.getLng().toFixed(6);
			document.getElementById("poi_json").value = '{"lng":' + latLng.getLng().toFixed(6) + ',"lat":' + latLng.getLat().toFixed(6) + '}'
		} else {
			ele.isClicked = false;
			ele.div.isClicked = false
		}
	})
}
var city = document.getElementById("city");
$(curCity).on("tap",function(e) {
	var e = e || window.event,
		target = e.target || e.srcElement;
	if (target.innerHTML == "更换城市") {
		city.style.display = "block";
		if (isNoValue) {
			bside.innerHTML = "";
			each(markerArray, function(n, ele) {
				ele.setMap(null)
			});
			markerArray.length = 0
		}
	}
});
var url2;
city.onclick = function(e) {
	var e = e || window.event,
		target = e.target || e.srcElement;
	if (target.className == "close") {
		city.style.display = "none"
	}
	if (target.className == "city_name") {
		curCity.children[0].innerHTML = target.innerHTML;
		url2 = encodeURI("//apis.map.qq.com/ws/geocoder/v1/?region=" + curCity.children[0].innerHTML + "&address=" + curCity.children[0].innerHTML + "&key=2SJBZ-MOXRX-ZNZ4C-ZHNJ2-EHRZT-RWFQ7&output=jsonp&&callback=?");
		$.getJSON(url2, function(result) {
			map.setCenter(new qq.maps.LatLng(result.result.location.lat, result.result.location.lng));
			map.setZoom(10)
		});
		city.style.display = "none"
	}
};
var url4;
$(".search_t").autocomplete({
	source: function(request, response) {
		url4 = encodeURI("//apis.map.qq.com/ws/place/v1/suggestion/?keyword=" + request.term + "&region=" + curCity.children[0].innerHTML + "&key=2SJBZ-MOXRX-ZNZ4C-ZHNJ2-EHRZT-RWFQ7&output=jsonp&&callback=?");
		$.getJSON(url4, function(result) {
			response($.map(result.data, function(item) {
				return ({
					label: item.title
				})
			}))
		})
	}
});

function each(obj, fn) {
	for (var n = 0, l = obj.length; n < l; n++) {
		fn.call(obj[n], n, obj[n])
	}
}
</script>
</body>
</html>
